<a href="<?php echo url_for('category/index') ?>">Back to list</a>
<div id="category_title">
<?php 
    echo image_tag($category->getFilename(), 
                   array('alt' => $category->getName(), 
                         'size' => '90x60', 
                         'align' => 'buttom', 'border' => '1')).' '.
    $category->getName();
?>
    <hr size="2" color="#BBBBBB" />
</div>

<div id="wrapper">
	    <div id="carousel">
<?php foreach ($category->getPhoto() as $photo): ?>
            <?php echo image_tag('luxe/'.$photo->getFilename(), array('alt' => $photo->getName(), 'size' => '200x100')); ?>
<?php endforeach; ?>    
</div>
	</div>
<div class="clearfix"></div>
<a class="prev" id="prev" href="#"><span>prev</span></a>
<a class="next" id="next" href="#"><span>next</span></a>

<script type= text/javascript>
    $(document).ready(function() {
        
/*	CarouFredSel: an infinite, circular jQuery carousel.
	Configuration created by the "Configuration Robot"
	at caroufredsel.frebsite.nl
*/

$(function() {

	$('#carousel').carouFredSel({
		responsive: true,
		items: {
			width: 200,
			height: '60%',
			visible: 6
		},
		auto: {
			items: 1
		},
		prev: '#prev',
		next: '#next'
	});
	
	$(window).bind( 'resize.example', function() {
		var $elems = $('#wrapper, #prev, #next'),
			$image = $('#carousel img:first'),
			height = $image.outerHeight( true );

		$elems
			.height( height )
			.css( 'marginTop', -( height/2 ) );

	}).trigger( 'resize.example' );

});


    });
    
</script>

